<template>
  <div class="mt-18px w-400px h-202px bg-white rounded-16px overflow-hidden relative z-0">
    <div
      class="absolute top-0 inset-x-0 w-full h-64px bg-gradient-to-b from-#FFE8F5 to-#FFFFFF z-[-1]"
    ></div>
    <div class="mt-24px mx-18px h-24px flex flex-row justify-between items-center">
      <h2 class="h-24px text-24px leading-24px font-bold text-#242633">礼物收集</h2>
      <div class="flex-1"></div>
      <button class="flex flex-row items-center" @click="isShowCollection = true">
        <div class="text-14px text-#8A8C99">All</div>
        <img src="@/assets/right.svg" class="w-16px h-16px text-#8A8C99" alt="" />
      </button>
    </div>
    <div class="mt-8px mx-18px h-12px leading-12px text-#8A8C99">
      收集 <span style="margin-right: 3px; color: #ffda00">{{ giftListCount }}</span> 种礼物
    </div>
    <div class="mt-12px w-400px px-7px box-border flex flex-row" v-if="giftList.length > 0">
      <div
        class="mx-9px w-78px flex flex-col items-center"
        v-for="item in giftListWithGroup"
        :key="item.id"
      >
        <div class="w-78px h-78px bg-#FFF8ED rounded-12px p-14px box-border">
          <img :src="item.image_cover" alt="" class="w-full h-full" />
        </div>
        <div class="mt-8px text-12px text-#8A8C99">x {{ item.number }}</div>
      </div>
    </div>
    <Empty v-else />
    <AllGift :total="giftListCount" :data="giftListWithGroup" v-model:visible="isShowCollection" />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { getReceiveGifts } from '@/api/user'
import Empty from '@/components/empty/index.vue'
import AllGift from './all-gift.vue'
const route = useRoute()
const userId = route.params.id
const isShowCollection = ref(false)
const giftList = ref([])
const giftListWithGroup = computed(() => {
  const giftListWithGroup = []
  const groupIds = []
  giftList.value.forEach((item) => {
    if (!groupIds.includes(item.gift_id)) {
      groupIds.push(item.gift_id)
      giftListWithGroup.push(item)
    } else {
      const index = giftListWithGroup.findIndex((i) => i.gift_id === item.gift_id)
      giftListWithGroup[index].number = giftListWithGroup[index].number + item.number
    }
  })
  return giftListWithGroup
})

const giftListCount = computed(() => {
  return giftListWithGroup.value?.length || 0
})
onMounted(() => {
  getReceiveGifts(userId).then((res) => {
    giftList.value = res
  })
})
</script>

<style></style>
